<template>
  <k-form-modal v-model="modalState.visible" drawer width="middle" title="账户金额管理" :show-footer="false">
    <div class="money-mange">
      <div class="number-box">
        <div class="title">预存款余额（元）</div>
        <div class="number">
          {{ props.rowData.balance }}
          <el-button
            type="primary"
            style="margin-left: 20px"
            @click="onClickRecharge"
          >对公充值</el-button>
        </div>
      </div>
      <div class="pop-title">充值记录</div>
      <KTable v-if="modalState.visible" v-bind="tableState" v-on="tableEvent">
        <template #trade_type="{ row }">
          <div class="flex-center">
            {{ row.trade_type }}
            <el-tooltip effect="light">
              <span style="margin-left: 10px; color: #4975e9;">操作详情</span>
              <template #content>
                <div class="content-box">
                  <div class="row-data">
                    <div class="label">操作员</div>
                    <div class="text">{{ row.admin_name }}</div>
                  </div>
                  <div class="row-data">
                    <div class="label">备注</div>
                    <div class="text">{{ row.remark }}</div>
                  </div>
                </div>
              </template>
            </el-tooltip>
          </div>
        </template>
      </KTable>
    </div>
    <!-- 对公充值 -->
    <RechargeModal ref="rechargeModal" @success="rechargeSuccess" />
  </k-form-modal>
</template>

<script setup lang='ts'>
import { ref } from 'vue';
import { useFormModal } from '@crud/index';
import { useTableList } from '../hooks/use-account-table';
import RechargeModal from './recharge-modal.vue';
import { colonelTopupList } from '@/api/crm-agency/kgj/colonel';
defineOptions({
  name: 'KgjAccountManageModal'
});
interface Props {
  rowData?: Record<string, any>
}
const props = withDefaults(defineProps<Props>(), {
  rowData: () => {
    return {};
  }
});
const emits = defineEmits(['success']);
const { state, tableState, tableEvent, ...methods } = useTableList();
const { state: modalState, show } = useFormModal({
  onShow: (mode = 0, data: any) => {
    tableState.value.data = [];
    if (data) {
      state.params = {
        colonel_id: data.colonel_id
      };
      methods.getList = async () => {
        state.loading = true;
        const res = await colonelTopupList({ data: { ...state.params }, params: { page: state.pages.page, limit: state.pages.pageSize } });
        state.loading = false;
        const { data } = res;
        tableState.value.data = data.items || [];
      };
      methods.getList();
    }
  }
});
// 对公充值
const rechargeModal = ref();
const onClickRecharge = () => {
  rechargeModal.value.show(1, {
    colonel_id: props.rowData.colonel_id
  });
};
const rechargeSuccess = () => {
  methods.getList();
  emits('success');
};
defineExpose({
  show
});
</script>
<style lang="scss" scoped>
.money-mange {
  .number-box {
    box-sizing: border-box;
    width: 600px;
    height: 113px;
    padding: 20px;
    background: #f2f5fd;
    border-radius: 10px;

    .title {
      margin-bottom: 16px;
    }

    .number {
      display: flex;
      align-items: center;
      font-size: 28px;
      font-weight: 500;
      line-height: 36px;
      color: #333;
    }
  }

  .pop-title {
    margin: 20px 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
    color: #1a1d23;
  }

  .flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
}

.row-content {
  display: flex;
  align-items: center;

  &:not(:last-child) {
    margin-bottom: 20px;
  }

  .row-label {
    margin-right: 20px;
  }
}

.content-box {
  .row-data {
    display: flex;

    .label {
      width: 50px;
      margin-right: 4px;
      font-size: 12px;
      font-weight: 400;
      line-height: 20px;
      color: #999;
    }

    .text {
      margin-right: 4px;
      font-size: 12px;
      font-weight: 400;
      line-height: 20px;
      color: #333;
    }
  }
}
</style>
